<template>
	<view class="container">
		<view class="withdraw-form">
			<view class="title">提取金额</view>
			<view class="transfer-input-wrapper flex align-end">
				<text class="unit">￥</text>
				<u-input class="input" v-model="value" type="digit" />
			</view>
			<view class="tip">
				我的资产: {{info.num}}  手续费{{info.fee}}%
			</view>
		</view>
		<view class="flex withdraw-type justify-between align-center">
			<text class="label">到账类型</text>
			<view class="flex align-center">
				<view class="icon"></view>
				<text class="value">银行卡</text>
			</view>
		</view>
		<view class="common-btn submit-btn" @tap="submit">提现</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:"",
				info:{}
			};
		},
		methods:{
			async submit(){
				if(!this.value){
					uni.showToast({
						icon:"none",
						title:"请输入金额"
					})
					return
				}
				try{
					await this.$u.api.withdrawApi({bank_id: this.info.w_bank[0].value,money: this.value})
					uni.showToast({
						icon:"success",
						title:"转出申请成功,请等待审核！"
					})
				}catch(e){
					//TODO handle the exception
				}
				
			}
		},
		async onLoad(){
			try{
				this.info=await this.$u.api.withdrawInfoApi()
			}catch(e){
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="scss">
.container{
	padding: 30rpx;
	.withdraw-form{
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.title{
			font-size: 24rpx;
			color: #333;
		}
		.transfer-input-wrapper {
			
			padding: 30rpx 0 18rpx 0;
			border-bottom: 2rpx solid #F0F8FF;
		
			.unit {
				margin-right: 10rpx;
				font-size: 26rpx;
				color: #333333;
				line-height: 70rpx;
			}
		
			.input {
				flex: 1;
				font-size: 50rpx;
				font-weight: 500;
				color: #333333;
			}
		
			.close-icon {
				width: 48rpx;
				height: 48rpx;
				background: url("~@/static/images/moneyTransfer/close-icon.png");
				background-size: 100% 100%;
			}
		}
		.tip{
			margin-top: 20rpx;
			font-size: 20rpx;
			color: #999;
		}
	}
	.withdraw-type{
		margin-top: 20rpx;
		padding: 15rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.label{
			font-size: 24rpx;
			color: #333;
		}
		.icon{
			margin: 20rpx;
			width: 72rpx;
			height: 72rpx;
			background: url("~@/static/images/deposit/yl-icon.png");
			background-size: 100% 100%;
		}
		.value{
			font-size: 24rpx;
			color: #333;
		}
	}
	.submit-btn{
		margin: 60rpx 0rpx;
	}
}
</style>
